<template>
    <div class="content">
        <div class="search-wrap">
            <div class="collect-search" @click="collect">
                <i class="icon" :class="collectvalue==1?'collect-full':'collect-empty'" @click='searchCoolect(collectvalue)'></i>
                <span>{{'OPTIONAL'|t}}</span>
            </div>
            <div class="form-select coins-select">
                <zx-form-group class="border">
                    <zx-select :place="$t('CURRENCY')" v-model="values" @change="changeValue(values)">
                        <zx-option :value="item.coin_no" v-for='(item,key) of allCoinTypeList' :key='key'>{{item.coin_core}}</zx-option>
                    </zx-select>
                </zx-form-group>
            </div>
            <div class="search-input-wrap" :class="showBool?'focus':'blur'">
                <div class="search-input">
                    <input type="text" class="input" v-model="searValue">
                </div>
                <i class="search-icon" @click="searchValue(searValue)"></i>
            </div>
        </div>
        <ul class="coins-list">
            <li class="coins-item boxShadow" v-for='(item,key) of coinsList' :key='key' @click.stop="$router.push({path:'coins/detail',query:{coinNo:item.cointype,tranCoinNo:item.cointype_tran}})">
                <h3 class="item-title">{{item.coinName}}／{{item.coinName_tran}}</h3>
                <div class="item-right">
                    <span>{{item.newprice|Fixed(2)}}</span>
                    <span class="c-magenta" v-if="item.ps<0">{{item.ps*100|Fixed}}%</span>
                    <span class="c-green-yellow" v-if="item.ps>0">{{item.ps*100|Fixed}}%</span>
                    <span v-else>{{item.ps*100|Fixed}}%</span>
                    <i class="icon hasCollection" :class="item.hasCollection==1?'collect-full':'collect-empty'" @click.stop="clickIcon(item)"></i>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    import { Form, Func, Auth } from '@/providers';
    import { Coins } from '@/services';
    export default {
        data() {
            return {
                searValue: '',
                showBool: true,
                collectvalue: 0,
                busy: true,
                values: '',
                allCoinTypeList: [],
                coinsList: []
            };
        },
        methods: {
            async searchCoolect(collectvalue) {
                if (!Auth.getItem('token')) {
                    Form.Totas(this.$t('NOTLOGIN'));
                    return false;
                }
                if (!collectvalue) {
                    this.values = '';
                    try {
                        let res = await Coins.GetMyCollection({
                            userId: Auth.getItem('userId'),
                            token: Auth.getItem('token'),
                            searchField: this.searValue ? this.searValue : ''
                        });
                        this.coinsList = res.data;
                    } catch (error) {
                        console.log(error);
                    }
                } else {
                    this.values = this.allCoinTypeList[0].coin_no;
                    this.getCoinNoList(this.values);
                }
                this.collectvalue = this.collectvalue == 1 ? 0 : 1;
            },
            async searchValue(val) {
                // 通过收藏夹搜索
                if (this.collectvalue == 1) {
                    this.values = '';
                    try {
                        let res = await Coins.GetMyCollection({
                            userId: Auth.getItem('userId'),
                            token: Auth.getItem('token'),
                            searchField: this.searValue ? this.searValue : ''
                        });
                        this.coinsList = res.data;
                    } catch (error) {
                        console.log(error);
                    }
                } else {
                    // 通过币区搜索
                    try {
                        let res = await Coins.FindCoinTypes({
                            searchFiled: this.searValue ? this.searValue : '',
                            userId: Auth.getItem('userId'),
                            token: Auth.getItem('token'),
                            pageNum: 0,
                            type: this.values,
                            pageItem: 0
                        });
                        this.coinsList = res.data.data;
                    } catch (error) {
                        console.log(error);
                    }
                }
            },
            async clickIcon(item) {
                let methosFn = item.hasCollection == 1 ? 'DelCollection' : 'AddCollection';
                try {
                    let res = await Coins[methosFn]({
                        userId: Auth.getItem('userId'),
                        token: Auth.getItem('token'),
                        tradeType: item.id
                    });
                    Form.Totas(res.desc, () => {
                        item.hasCollection = item.hasCollection == 1 ? 0 : 1;
                    });
                } catch (error) {
                    console.log(error);
                }
            },
            ToggleSearchInput() {
                this.showBool = !this.showBool;
            },
            collect() {
                this.collectBool = !this.collectBool;
            },
            changeValue(value) {
                this.searValue = '';
                this.collectvalue = 0;
                this.getCoinNoList(value);
            },
            // 获取列表数据
            async getCoinNoList(value) {
                if (!value) { return false; }
                try {
                    let res = await Coins.GetCoinTrateInfo({
                        type: value,
                        pageNum: 1,
                        userId: Auth.getItem('userId'),
                        pageItem: 10000
                    });
                    this.coinsList = res.data.data;
                } catch (error) {
                    console.log(error);
                }
            },
            // 获取下拉数据数据
            async getData() {
                try {
                    let res = await Coins.GetAllCoinType({
                        token: Auth.getItem('token')
                    });
                    this.allCoinTypeList = res.data;
                    this.values = this.allCoinTypeList[0].coin_no;
                } catch (error) {
                    console.log(error);
                }
            }
        },
        created() {
            this.getData();
        }
    };
</script>
<style lang="scss" scoped>
    @import "../../assets/sass/coins.scss";
</style>